<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>svg画基本图形</title>
        <style>
        	svg{
        		display: block;
        		border: 1px solid red;
        		margin: 10px auto;
        	}
        </style>
    </head>
    <body>
    	<svg xmlns="http://www.w3.org/2000/svg" width="1300" height="600">
    		<!-- 画矩形,其中rx和ry是画圆角的 -->
    		<rect x="20" y="20" width="200" height="200" rx="20" ry="20" fill="blue" stroke="orange" stroke-width="5" />
    		<!-- 画圆 -->
			<circle cx="350" cy="120" r="100" fill="blue" stroke="orange" stroke-width="5" />
			<!-- 画椭圆 -->
			<ellipse cx="650" cy="120" rx="150" ry="100" fill="blue" stroke="orange" stroke-width="5" />
			<!-- 画线 -->
			<line x1="900" y1="120" x2="1200" y2="200" stroke="orange" stroke-width="5" />
			<!-- 画多条线 -->
			<polyline points="100 380 300 380 300 580 100 480" fill="none" stroke="orange" stroke-width="5" />
			<!-- 多边型 -->
			<polygon points="400 380 700 380 800 580 500 480" fill="none" stroke="orange" stroke-width="5" />
			<polygon points="900 400 1000 400 1000 500 900 500" fill="none" stroke="orange" stroke-width="5" />

			<!-- 路径 -->
			<path d="M 1100 400 L 1200 400" fill="none" stroke="orange" stroke-width="5"  />
			<path d="M 1100 500 l 100 0" fill="none" stroke="orange" stroke-width="5"  />
    	</svg>
    </body>
</html>